<template>
  <div>
    <cardTool>
      <template #headerDiy>
        <el-row style="width:100%" type="flex" justify="end">
          <el-button size="small" type="primary" @click="addFn">添加员工</el-button>
        </el-row>
      </template>
      <template #body>
        <el-table
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="用户名"
          />
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="setRole(row.id)">设置角色</el-button>
              <el-button size="small" @click="update(row.id)">编辑</el-button>
              <el-button type="warning" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            background
            style="margin-top:16px"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
      </template>
    </cardTool>
    <AddEmployee
      ref="AddEmployee"
      :show-dialog.sync="visibleDialog"
      @addEmployee="addEmployees"
      @updatePassword="updateHavePassword"
      @updateNoPassword="updateNoPassword"
    />
    <SetRole ref="setRole" :is-show.sync="isShowRoleList" />
  </div>
</template>

<script>
import AddEmployee from './common/AddEmployee.vue'
import SetRole from './common/SetRole.vue'
import { getEmployeeList, addEmployee, delEmploy, getEmployeeById, updateEmploy, getEmployeeNumber } from '@/api/employee'
export default {
  components: {
    AddEmployee,
    SetRole
  },
  data() {
    return {
      tableData: [],
      limit: 5,
      start: 0,
      visibleDialog: false,
      total: 40,
      isShowRoleList: false

    }
  },
  async created() {
    this.getEmployeeList()
    this.getNumber()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },
    handleCurrentChange(val) {
      this.start = val * this.limit - this.limit

      this.getEmployeeList()
    },
    handleSizeChange(val) {
      console.log(86, val)
      this.limit = val
      this.getEmployeeList()
    },
    // 封装获取列表函数
    async getEmployeeList() {
      const res = await getEmployeeList({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(res)
      this.tableData = res.data
    },
    // 增加员工
    addFn() {
      this.visibleDialog = true
    },
    async addEmployees(formData) {
      await addEmployee(formData)
      // console.log(83, res)
      this.getNumber()
      this.getEmployeeList()
      this.$refs.AddEmployee.closeFn()
    },
    // 删除功能
    async delFn(id) {
      this.$confirm('确定删除吗？', '提示', {
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1) {
          this.start = this.start - this.limit
        }
        await delEmploy(id)
        this.getNumber()
        this.getEmployeeList()
      }).catch(err => {
        console.log(err)
      })
    },
    // 数据回显
    async update(id) {
      this.visibleDialog = true
      const res = await getEmployeeById(id)
      // console.log(101, res)
      this.$refs.AddEmployee.formData = res.data
    },
    // 修改了密码的提交事件
    async updateHavePassword(formData) {
      await updateEmploy(formData)
      this.getEmployeeList()
      this.$refs.AddEmployee.closeFn()
    },
    // 没有修改密码的提交事件
    async updateNoPassword(formData) {
      await updateEmploy(formData)
      this.getEmployeeList()
      this.$refs.AddEmployee.closeFn()
    },
    // 设置角色
    async setRole(id) {
      this.isShowRoleList = true

      this.$refs.setRole.setPeopleRole(id)
    },
    // 获取员工数量
    async getNumber() {
      const res = await getEmployeeNumber()
      // console.log(70, res)
      this.total = res.data
    }
  }
}
</script>

<style>

</style>
